<script setup>
import { addProject, updateProject } from '@/api/subject/subject'

const { proxy } = getCurrentInstance()
const route = useRoute()

const dialogFormVisible = defineModel('dialogFormVisible', {
  type: Boolean,
  default: false
})
const props = defineProps({
  projectInfo: {
    type: Object,
    default: () => ({
      id: '',
      projectCode: '',
      projectName: '',
      remark: '',
      subjectId: ''
    })
  },
  title: {
    type: String,
    default: ''
  }
})
const submitLoading = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  projectCode: '',
  projectName: '',
  remark: '',
  subjectId: ''
})
const rules = reactive({
  projectCode: [
    { required: true, message: '请输入专题编号', trigger: 'blur' }
  ],
  projectName: [
    {
      required: true,
      message: '请输入专题名称',
      trigger: 'blur'
    }
  ]
})
const emit = defineEmits(['cancel', 'onSuccess'])

const handleConfirm = async () => {
  proxy.$refs.queryRef.validate(valid => {
    if (valid) {
      submitLoading.value = true
      if (form.id) {
        updateProject(form).then(response => {
          proxy.$modal.msgSuccess('修改成功')
          emit('onSuccess')
          submitLoading.value = false
        })
      } else {
        addProject({ ...form, subjectId: route.params.subjectId }).then(response => {
          proxy.$modal.msgSuccess('新增成功')
          emit('onSuccess')
          submitLoading.value = false
        })
      }
    }
  })
}
const handleCancel = () => {
  proxy.resetForm('queryRef')
  emit('cancel')
  handleClose()
}
const handleClose = () => {
  emit('update:dialogFormVisible', false)
}
watch(() => props.projectInfo.id, (newVal, oldVal) => {
  Object.assign(form, props.projectInfo)
}, { immediate: true })
</script>

<template>
  <div>
    <el-dialog
      v-model="dialogFormVisible"
      :title="title"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="queryRef"
      >
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item
              label="任务编号"
              prop="projectCode"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="form.projectCode"
                placeholder="请输入任务编号"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="任务名称"
              prop="projectName"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="form.projectName"
                placeholder="请输入任务名称"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="备注"
              prop="remark"
              :label-width="formLabelWidth"
            >
              <el-input
                v-model="form.remark"
                placeholder="请输入备注"
                autocomplete="off"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel">
            取消
          </el-button>
          <el-button
            type="primary"
            @click="handleConfirm"
            :loading="submitLoading"
          >
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>
